<template>
  <view class="user-info">
    <wd-cell title="头像" center>
      <button
        open-type="chooseAvatar"
        @chooseavatar="onChooseAvatar"
        class="button-avatar"
      >
        <image :src="url" class="avatar-img"></image>
      </button>
    </wd-cell>
    <wd-cell title="昵称" center>
      <input
        type="nickname"
        v-model="nickname"
        custom-class="custom-value"
        @blur="inputblur"
      />
    </wd-cell>
    <view class="slot"
      ><view class="tips">昵称限制为2-32字符，一个汉字代表2个字符</view>
      <wd-button type="success" @click="confirm">确认</wd-button></view
    >
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";

import { getUserInfo, updateUserInfo } from "../../api/wechat";

let openId = computed(() => uni.getStorageSync("openId"));

onShow(() => {
  if (openId.value) {
    getUserInfo({
      openId: openId.value,
    }).then((res) => {
      if (res.code === 0) {
        nickname.value = res.data.nickname;
        url.value =
          res.data.avatar_url ||
          "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
      }
    });
  }
});
const url = ref(
  "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
);
const nickname = ref(null);

const onChooseAvatar = (e) => {
  const tempPath = e.detail.avatarUrl;
  uni.getFileSystemManager().getFileInfo({
    filePath: tempPath,
    success: (res) => {
      uni
        .uploadFile({
          url: "https://www.sushu.online/api/wechat/upload",
          filePath: tempPath,
          name: "file",
          formData: {
            openId: openId.value,
          },
        })
        .then((ires) => {
          console.log(ires);
          let urlData = JSON.parse(ires.data);
          url.value = urlData.data;
        });
    },
  });
};
const inputblur = (e) => {
  nickname.value = e.detail.value;
};
const confirm = () => {
  updateUserInfo({
    openId: openId.value,
    nickname: nickname.value,
    url: url.value,
  }).then((res) => {
    if (res.code === 0) {
      uni.navigateBack();
    }
  });
};
</script>

<style scoped lang="scss">
.user-info {
  :deep(.wd-cell) {
    align-items: center;
    border-bottom: 1px solid #d1d1d1;

    .wd-cell__right {
      display: flex;
      justify-content: flex-end;

      .button-avatar {
        height: 125rpx;
        width: 125rpx;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 1rpx 5rpx #000;
        padding: 0;

        .avatar-img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .slot {
    padding: 0 5%;
    margin-top: 16rpx;

    .tips {
      color: #999;
      font-size: 26rpx;
      margin-left: -3%;
    }

    :deep(.wd-button) {
      margin-top: 32rpx;
      width: 100%;
    }
  }
}
</style>
